<template>
    <!-- 持有仓位列表 -->
    <div>
        <!--        <div class="flex justify-between" v-if="listData.length">-->
        <!--            <div class="flex" @click.stop="changeIcon">-->
        <!--                <img v-show="!iconShow" src="../../assets/image/public/grey-rounded.png" alt="" class="w-38 h-38"/>-->
        <!--                <img v-show="iconShow" src="../../assets/image/public/blue-rounded.png" alt="" class="w-38 h-38"/>-->
        <!--                <div class="ml-37">{{ $t('隐藏其它合约') }}</div>-->
        <!--            </div>-->
        <!--        </div>-->
        <div class="" v-for="item in listData" :key="item.order_no">
            <div class="flex justify-between pt-44 pb-44">
                <div class="flex flex-col">
                    <div class="flex items-center">
                        <div class="pl-10 pr-11 pt-5 pb-5 text-white open-btn"
                            :class="item.direction == 'buy' ? ' bg-green' : 'bg-red'">
                            {{ item.direction == 'buy' ? $t('开多') : $t('开空') }}
                        </div>
                        <div class="ml-22 font-31 font-600">
                            <span class="textColor">{{ item.name }} {{ $t('交割') }}</span>
                            <span class="text-grey font-28 font-400 ml-17 mr-17">{{ $t('全仓') }} {{ item.lever_rate
                            }}x</span>
                        </div>
                        <img v-if="item.direction == 'buy'" src="../../assets/image/public/green-leverage.png" alt=""
                            class="w-32 h-32" />
                        <img v-else src="../../assets/image/public/red-leverage.png" alt="" class="w-32 h-32" />
                    </div>
                </div>
            </div>
            <div class="flex justify-between">
                <div class="fexl-1">
                    <div class="text-grey">{{ $t('购买价') }}(USDT)</div>
                    <div class="mt-20 textColor">{{ item.open_price }}</div>
                </div>
                <div>
                    <div class="text-grey text-right">{{ $t('现价') }}</div>
                    <div class="mt-20 text-right" :class="item.close_price > item.open_price ? 'text-green' : 'text-red'">
                        {{ item.close_price }}</div>
                </div>
            </div>
            <div class="flex pt-40 pb-40">
                <div class="flex-1">
                    <div class="text-grey">{{ $t('方向') }}</div>
                    <div class="mt-20" :class="item.direction === 'buy' ? 'text-green' : 'text-red'">{{ item.direction ===
                        'buy' ? $t('开多') : $t('开空') }}</div>
                </div>
                <div class="flex-1">
                    <div class="text-grey text-center">{{ $t('数量') }}</div>
                    <div class="mt-20 text-center textColor">{{ item.volume }}</div>
                </div>
                <div class="flex-1 flex flex-col items-end">
                    <div class="text-grey">{{ $t('盈亏') }}</div>
                    <div class="mt-20" :class="item.profit / 1 > 0 ? 'text-green' : 'text-red'">
                        {{ item.profit / 1 > 0 ? '+' + item.profit : item.profit }}
                    </div>
                </div>
            </div>
            <div class="flex pb-32">
                <div class="flex-1">
                    <div class="text-grey">{{ $t('剩余时间') }}</div>
                    <div class="mt-20 textColor">{{ fomatTime(item.remain_time) }}</div>
                </div>
                <div class="flex-1">
                    <div class="text-grey  text-center">{{ $t('交割时间') }}</div>
                    <div class="mt-20  text-center textColor">{{ item.time_num + item.time_unit }}</div>
                </div>
                <div class="flex-1">
                    <div class="text-grey text-right">{{ $t('操作') }}</div>
                    <div class="mt-20 colorMain text-right" @click="goDetail(item)">{{ $t('详情') }}</div>
                </div>
            </div>
            <div class="w-full h-1 bgDark"></div>
        </div>
        <div class="text-grey text-center py-300" v-if="!listData.length && $route.name == 'perpetualContract'">{{
            $t('您目前没有持仓') }}</div>
        <van-popup v-model="show">
            <popup-delivery :showBtns="true" :price="nowPice" @timeEnd="handleTimeEnd" :detailData="detailData"
                :key="detailData.order_no" @close="onClose" />
        </van-popup>
    </div>
</template>

<script>
import PopupDelivery from '@/components/popup-delivery'
import { Popup } from 'vant';
import { _futrueOrderDetail } from "@/API/trade.api";
import { _getHomeList } from '@/API/home.api'
export default {
    name: "deliveryHoldList",
    data() {
        return {
            show: false,
            iconShow: false,
            detailData: {},
            nowPice:"",
            quotesTime:null
        }
    },
    components: {
        [Popup.name]: Popup,
        PopupDelivery
    },
    props: {
        listData: {
            type: Array,
            default() {
                return []
            }
        },
        price: {
            type: [Number, String],
            default: '0.00'
        },
    },
    methods: {
        fetchQoutes(symbol) { // 获取当前行情
            _getHomeList(symbol).then(data => { // 获取行情
                this.nowPice = data[0].close;
            });
       },
        clearTimeout() {
            clearTimeout(this.timeout)
            this.timeout = null
        },
        clearIntervalId() {
            clearInterval(this.quotesTime);
            this.quotesTime = null
        },
        //合约时间结束后显示详情
        handleTimeEnd(order) {
            _futrueOrderDetail(order).then(data => {
                this.clearTimeout()
                this.detailData = data
                if (data.state !== 'created') {
                    this.timeout = setTimeout(() => {
                        this.handleTimeEnd(order)
                    }, 1000)
                }
            })
        },
        fomatTime(time) {
            let arr = time.split(':')
            let day = Math.floor(arr[0] / 24)
            let hour = arr[0] % 24 >= 10 ? arr[0] % 24 : '0' + arr[0] % 24
            console.log(hour)
            let min = arr[1] >= 10 ? arr[1] : '0' + arr[1]
            let sec = arr[2] >= 10 ? arr[2] : '0' + arr[2]
            if (day >= 1) {
                return day + this.$t('天') + ' ' + hour + ':' + min + ':' + sec
            } else {
                return hour + ':' + min + ':' + sec
            }
        },
        changeIcon() {
            this.iconShow = !this.iconShow;
        },
        goDetail(item) {
            this.detailData = item
            this.show = true
            if(item.state != 'created'){
                this.clearIntervalId();
                this.quotesTime = setInterval(() => {
                    this.fetchQoutes(item.symbol);
                }, 1000);
            }
            // 当前数据是定时轮询地数据, 不必拿最新地数据了
            // _futrueOrderDetail(item.order_no).then(data => {
            //     this.detailData = data
            //      this.show = true
            // })
            // this.$router.push({
            //     path:"/orderDetail?order_no=" + item.order_no
            // });
        },
        onClose() { // 关闭
            this.show = false
        }
    },
    deactivated() {
        this.clearTimeout();
        this.clearIntervalId();
    },
    beforeDestroy() {
        this.clearTimeout();
        this.clearIntervalId();
    }
}
</script>
<style lang="scss" scoped>
.border-b-color {
    @include themify() {
        border-bottom: 1px solid themed("border_color");
    }
}

::v-deep .van-popup {
    @include themify() {
        background: themed("input_background1");
    }
}

.open-btn {
    border-radius: 10px;
}
</style>
